<template>
  <el-dialog
    :type="type"
    :title="title"
    :append-to-body="appendToBody"
    :visible.sync="visible"
    :close-on-click-modal="closeOnClickModal"
    :width="width"
  >
    <el-checkbox-group
      v-model="dataForm.checkbox"
      size="medium"
      @change="statusChange()"
    >
      <el-checkbox
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        border
      >
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </el-dialog>
</template>

<script>
export default {
  props: {
    appendToBody: { type: Boolean, default: false }, // 是否嵌套
    closeOnClickModal: { type: Boolean, default: false }, // 是否可以点击关闭
    title: String, // 对话框title
    type: String, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
    width: String, // 对话框宽度800px 或 50%
  },
  data() {
    return {
      visible: false,
      dataForm: {
        checkbox: [],
      },
      options: [],
    }
  },
  methods: {
    init(options) {
      this.visible = true
      this.options = options
    },
    statusChange() {
      if (this.dataForm.checkbox.length > 1) {
        this.dataForm.checkbox.splice(0, 1)
      }
      // console.log(this.dataForm.checkbox)
      this.$emit('radioval', this.dataForm.checkbox)
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
  margin-left: 55px;
}
::v-deep .el-checkbox__label {
  width: 130px;
}

::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0;
  margin-bottom: 20px;
}
::v-deep .el-checkbox.is-bordered.el-checkbox--medium .el-checkbox__label {
  line-height: normal;
}
</style>
